<template>
  <div class="channel-edit">
    <!-- 当前登陆用户已经订阅的频道 -->
    <div class="channel">
      <van-cell title="我的频道" :border="false">
          <van-button  size="mini" type="info" @click="editing = !editing">编辑</van-button>
      </van-cell>
      <van-grid>
        <van-grid-item v-for="(item,idx) in channels"
         :key="item.id"
         @click="hClickMyChannel(item)"
         :class="{'cur': idx===activeIndex}">
          <span>{{item.name}}</span>
          <van-icon name="cross" v-show="editing&&idx!==0" class="btn"></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
     <!-- 当前登陆用户没有订阅的频道 -->
    <div class="channel">
      <van-cell title="可选频道" :border="false"></van-cell>
      <van-grid>
        <van-grid-item
        v-for="item in cRecommendChannels"
        :key="item.id"
        @click="hAddChannel(item)">
          <span>{{item.name}}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getAllChannels, addChannel, deleteChannel } from '@/api/channel.js'
export default {
  name: 'ChannelEdit',
  // props: ['channels', 'activeIndex'],
  props: {
    channels: {
      type: Array,
      required: true
    },
    activeIndex: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      editing: false, // 是否处于编辑状态
      allChannels: [] // 保存所有频道（并不会包含那个特殊的 推荐频道）
    }
  },
  created () {
    this.loadAllChannels()
  },
  computed: {
    cRecommendChannels () {
      // 公式： allChannels - channels
      // 可选频道 = 所有频道 除去 已订阅的频道
      // 本质：如何从一个数组中减去另一个数组
      const arr = this.allChannels.filter(channel => {
        const idx = this.channels.findIndex(item => item.id === channel.id)
        // 如果找到，idx肯定不是-1
        // 如果找不到，idx 就是-1
        return idx === -1
      })
      return arr
    }
  },
  methods: {
    // 用户在推荐频道上点击了某一项
    async hAddChannel (channel) {
      console.log(addChannel)
      // console.log(channel)
      // 组装数据. 改造成接口参数要求的格式
      let curChannelsNow = [...this.channels, channel] // 把当前点击的频道放到已选频道的后面
      console.log('当前【的', curChannelsNow)
      curChannelsNow.splice(0, 1) // 删除第一个
      // 把[{id,name}, ...] 改成 [{id, seq}
      curChannelsNow = curChannelsNow.map((item, idx) => {
        return { id: item.id, seq: idx }
      })
      const result = await addChannel(curChannelsNow)
      console.log(result)
      this.channels.push(channel)
    },
    // 用户在我的频道上点击了某项
    async hClickMyChannel (channel) {
      if (this.editing) {
        if (channel.id === 0) {
          return
        }
        // 在编辑状态点击
        // 请求接口不在订阅当前频道
        const result = await deleteChannel(channel.id)
        console.log(result)
        // 找下标
        const idx = this.channels.findIndex(it => it.id === channel.id)
        // 删除
        if (idx !== -1) {
          this.channels.splice(idx, 1) // 更新视图，从当前列表删除这项
        }
        //  如果当前删除的频道在 此时的活动频道之前，则要更新一下父组件中的活动频道的下标 ，具体就是 -1
        if (idx < this.activeIndex) {
          this.$emit('updateCurIndex', this.activeIndex - 1)
        }
      } else {
        // 关闭弹层
        this.$emit('close')
        // 2. 在父组件index.vue中跳转到当前频道项
        this.$emit('updateCurChannel', channel)
      }
    },
    async loadAllChannels () {
      const result = await getAllChannels()
      // console.log(result)
      this.allChannels = result.data.data.channels
    }
  }
}
</script>

<style lang="less" scoped>
  .channel{
    padding:15px;
    font-size:14px;
  }
  .btn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24px;
  }
  .cur {
    color:red;
    font-weight:bold;
  }
</style>
